<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-container">
                <div class="modal-header">
                    <slot name="header">
                        <div class="modal-header-item">
                            已上架商品
                            <span class="modal-header-close" @click="closeModal"> &times;</span>
                        </div>
                    </slot>
                </div>
                <div class="modal-body">
                    <slot name="body">
                        <div class="modal-body-header">
                            <div class="modal-body-header-btn">
                                <!--<el-button size="mini">新建</el-button>-->
                                <el-button size="mini" @click="resetOnload">刷新</el-button>
                            </div>
                            <div class="modal-body-header-input">
                                <el-input placeholder="请输入内容" @keyup.enter.native="productList" prefix-icon="el-icon-search"
                                    size="mini" v-model="formData.productNoName"></el-input>
                            </div>
                        </div>
                        <el-table v-loading="loading" :data="tableData" style="width: 100%" tooltip-effec="dark"
                            @selection-change="handleSelectionChange" :header-cell-style="{background:'#f2f2f2'}">
                            <el-table-column type="" width="55">
                                <template slot-scope="scope">
                                    <span>
                                        <el-radio v-model="radioValue" :label="scope.row.id">&nbsp;</el-radio>
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="productName" label="标题" width="" align="left">
                                <template slot-scope="scope">
                                    <div class="modal-body-titleMsg">
                                        <img :src="UTILS.getImgUrl(scope.row.images)" />
                                        <span>{{scope.row.productName}}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" width="160" align="left">
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <!--<m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></m-pagination>-->
                        <div class="modal-body-pagination" style="text-align: right;margin-top: 10px;">
                            <el-pagination class="mt30 flex fix-end" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="formData.pageNum" :page-size="formData.pageSize" layout="total, prev, pager, next"
                                :total="total">
                            </el-pagination>
                        </div>
                        <div class="modal-body-footer">
                            <el-button type="primary" @click="confirmAdd" size="mini">确定</el-button>
                        </div>
                    </slot>
                </div>

                <div class="modal-footer">
                    <slot name="footer">
                    </slot>
                </div>
            </div>
        </div>

    </transition>
</template>
<script>
import mPagination from "@/components/m-pagination/m-pagination";
//	import {
//		productList
//	} from '@/common/service/shopManagement/microPage.js'
export default {
    components: {
        mPagination
    },
    data() {
        return {
            radioValue: "",
            loading: false,
            tableData: [],
            value: "",
            formData: {
                pageNum: 1,
                pageSize: 8,
                productNoName: ""
            },
            total: 0,
            selectObj: ""
        };
    },
    props: [""],
    created() {
        this.productList();
    },
    methods: {
        closeModal() {
            this.$emit("closeSelect");
        },
        productList() {
            const self = this;
            productList(this.formData)
                .then(res => {
                    self.tableData = res.content;
                    self.total = res.totalElements;
                })
                .catch(res => {});
        },
        resetOnload() {
            this.productList();
        },
        //勾选操作
        handleSelectionChange(data) {
            this.selectObj = data;
        },
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this.productList();
        },
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this.productList();
        },
        confirmAdd() {
            const self = this;
            var _obj = "";
            this.tableData.forEach(function(item, idx) {
                if (item.id == self.radioValue) {
                    _obj = JSON.stringify(item);
                }
            });
            this.$emit("confirmSelectGoods", _obj);
        }
    }
};
</script>
<style lang="scss" scoped>
.modal-mask {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
    .modal-container {
        width: 830px;
        min-height: 300px;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        text-align: initial;
        background-color: #fff;
        border-radius: 4px;
        padding: 20px;
        font-size: 14px;
        margin-top: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease;
        white-space: normal;
        .modal-header-item {
            position: relative;
            padding-bottom: 10px;
            border-bottom: 1px solid #e5e5e5;
            margin: 0;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333333;
            font-weight: 700;
            .modal-header-close {
                position: absolute;
                right: 0;
                top: -5px;
                color: #999;
                height: 30px;
                width: 30px;
                font-size: 34px;
                text-align: center;
                line-height: 30px;
                font-weight: 400;
            }
        }
        .modal-header h3 {
            margin-top: 0;
            color: #42b983;
        }
        .modal-body {
            margin: 10px 0;
            width: 100%;
            overflow: hidden;
            .modal-body-header {
                width: 100%;
                overflow: hidden;
                margin-bottom: 15px;
                .modal-body-header-btn {
                    float: left;
                }
                .modal-body-header-input {
                    float: right;
                }
            }
            .modal-body-footer {
                width: 100%;
                overflow: hidden;
                padding: 10px 0;
                text-align: center;
            }
            .modal-body-titleMsg {
                display: inline-block;
                img {
                    height: 50px;
                    width: 50px;
                }
                span {
                    font-size: 12px;
                    color: #3399ff;
                    margin-left: 10px;
                }
            }
        }
        .modal-default-button {
            float: right;
        }
    }
}
/*
	 * The following styles are auto-applied to elements with
	 * transition="modal" when their visibility is toggled
	 * by Vue.js.
	 *
	 * You can easily play with the modal transition by editing
	 * these styles.
	 */

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
</style>